/*定义一个名字叫heartAnimate的动画，实现心形图的放大以及旋转效果*/
@keyframes heartAnimate{
    0%,100%{transform:scale(1) rotate(0);}                       /*0%,100%时保持图形的原大小且不旋转*/
    10%,30%{transform: scale(1) rotate(3deg);}                  /*10%,30%时图形缩小成0.9倍，并且顺时针旋转3度*/
    20%,40%,60%,80%{transform:scale(1.0) rotate(-3deg);}         /*20%,40%,60%,80%时图形扩大成1.1倍，并且逆时针旋转3度*/
    50%,70%{ transform:scale(1.0) rotate(3deg);}                 /*50%,70%时图形扩大成1.1倍，并且顺时针旋转3度*/
}
@-webkit-keyframes heartAnimate{
    0%,100%{-webkit-transform: scale(1) rotate(0);}
    10%,30%{-webkit-transform:scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-webkit-transform: scale(1.1) rotate(-3deg);}
    50%,70%{-webkit-transform: scale(1.1) rotate(3deg);}
}
@-moz-keyframes heartAnimate{
    0%,100%{-moz-transform:scale(1) rotate(0);}
    10%,30%{-moz-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -moz-transform:scale(1.1) rotate(3deg);}
}
@-o-keyframes heartAnimate{
    0%,100%{-o-transform:scale(1) rotate(0);}
    10%,30%{-o-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -o-transform:scale(1.1) rotate(3deg);}
}
@-ms-keyframes heartAnimate{
    0%,100%{-ms-transform:scale(1) rotate(0);}
    10%,30%{-ms-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -ms-transform:scale(1.1) rotate(3deg);}
}

.svgicon {
    /* 通过设置 font-size 来改变图标大小 */
    width: 1em; height: 1em;
    /* 图标和文字相邻时，垂直对齐 */
    vertical-align: -0.15em;
    /* 通过设置 color 来改变 SVG 的颜色/fill */
    fill: currentColor;
    /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
       normalize.css 中也包含这行 */
    overflow: hidden;
}

.svgicon {
    font-size: 42px;
    line-height: 100px;
    margin: 0px 0;
    transition: font-size ,color;
    transition:all 0.25s ease-in-out ;
}

.iconwrap {
    min-width: 0px;
    display: inline-block;
    font-size:12px;
    color:#2db7f5;
    transition: font-size ,color;
    transition:all 0.25s ease-in-out ;
    transform:scale(1) rotate(0)
}

.iconwrap:hover, .iconwrap:hover>.svgicon{
    /* color:#2db7f5; */
    -webkit-animation: heartAnimate 2s ease infinite;
}
